<template>
  <div class="chart-item">
    <div v-if="channelData.length === 0" class="inbot"><el-empty/></div>
    <div ref="canvas" style="height:100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.canvas)
    this.renderChart()
    window.addEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  computed: {
    channelData () {
      return [
        { averageAmount: 120, channel: '一月' },
        { averageAmount: 200, channel: '二月' },
        { averageAmount: 150, channel: '三月' },
        { averageAmount: 80, channel: '四月' },
        { averageAmount: 70, channel: '五月' },
        { averageAmount: 110, channel: '六月' },
        { averageAmount: 130, channel: '七月' },
        { averageAmount: 130, channel: '八月' },
        { averageAmount: 130, channel: '九月' },
        { averageAmount: 130, channel: '十月' },
        { averageAmount: 130, channel: '十一月' },
        { averageAmount: 130, channel: '十二月' },
      ]
    }
  },
  watch: {
    channelData () {
      this.renderChart()
    }
  },
  methods: {
    renderChart () {
      const color = ['#8aa6ff', '#8ae6ff', '#c8b1ff', '#ecec8c', '#a5d5e3', '#acec9d']
      const list = []
      const xdata = []
      this.channelData.forEach((item, i) => {
        xdata.push(item.channel)
        list.push({
          value: item.averageAmount,
          // itemStyle: { color: color[i % color.length] }
        })
      })
      this.myChart.setOption({
        grid: {
          top: 20,
          left: 20,
          right: 20,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xdata,
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d8dce9'
            }
          },
          axisLabel: {
            color: '#949aaa'
          }
        },
        yAxis: {
          // name: '单笔均价（元）',
          nameTextStyle: {
            color: '#666a83',
            padding: [0, 0, 0, 50]
          },
          type: 'value',
          axisLabel: { show: false },
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d8dce9'
            }
          }
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              color: '#292E4F',
              fontWeight: 600
            },
            barWidth: '26px',
            itemStyle: {
              borderRadius: [100, 100, 0, 0]
            },
            data: list
          }
        ]
      })
    }
  }
}
</script>

<style>

</style>
